﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="main" style="width: 100%;height:100%;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script src="~/Content/lib/echarts/china.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var main = echarts.init($("#main")[0]);
        window.addEventListener("resize", function () {
            main.resize();
        });
        var dataList = [
            { name: "南海诸岛", value: 0 },
            { name: '北京', value: randomValue() },
            { name: '天津', value: randomValue() },
            { name: '上海', value: randomValue() },
            { name: '重庆', value: randomValue() },
            { name: '河北', value: randomValue() },
            { name: '河南', value: randomValue() },
            { name: '云南', value: randomValue() },
            { name: '辽宁', value: randomValue() },
            { name: '黑龙江', value: randomValue() },
            { name: '湖南', value: randomValue() },
            { name: '安徽', value: randomValue() },
            { name: '山东', value: randomValue() },
            { name: '新疆', value: randomValue() },
            { name: '江苏', value: randomValue() },
            { name: '浙江', value: randomValue() },
            { name: '江西', value: randomValue() },
            { name: '湖北', value: randomValue() },
            { name: '广西', value: randomValue() },
            { name: '甘肃', value: randomValue() },
            { name: '山西', value: randomValue() },
            { name: '内蒙古', value: randomValue() },
            { name: '陕西', value: randomValue() },
            { name: '吉林', value: randomValue() },
            { name: '福建', value: randomValue() },
            { name: '贵州', value: randomValue() },
            { name: '广东', value: randomValue() },
            { name: '青海', value: randomValue() },
            { name: '西藏', value: randomValue() },
            { name: '四川', value: randomValue() },
            { name: '宁夏', value: randomValue() },
            { name: '海南', value: randomValue() },
            { name: '台湾', value: randomValue() },
            { name: '香港', value: randomValue() },
            { name: '澳门', value: randomValue() }
        ]
        function randomValue() {
            return Math.round(Math.random() * 1000);
        }
        var option = {
            title: {
                text: '2020年全国各省份库位租赁面积（万㎡）',
                top:'10px',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b} {c}万㎡'
            },
            visualMap: {
                min: 0,
                pieces: [
                    { gt: 0, lte: 200 },
                    { gt: 200, lte: 400 },
                    { gt: 400, lte: 600 },
                    { gt: 600, lte: 800 },
                    { gt: 800, lte: 1000 },
                    { gt: 1000 },
                ],
                inRange: {
                    color: ['#9fb5ea', '#66E0E3', '#9fb5ea', '#3FA7FF', '#9feaa5','red'],
                },
                top: 'bottom',
                left: 'center',
                orient: 'horizontal'
            },
            series: [
                {
                    name: '仓库租赁数量',
                    type: 'map',
                    mapType: 'china',
                    label: {
                        show: true
                    },
                    data: dataList
                }
            ]
        };
        main.setOption(option);
        main.on('click', function (params) {
            //alert(params.name);
        });
    })
</script>